<template>
	<div class="error-container commonality">
		<div class="error-content">
			<div class="pic-error">
				<el-row>
					<el-col :span="12">
						<div class="el-image pic-error-parent">
							<img class="el-image__inner" src="./images/403.png" />
						</div>
						<div class="el-image pic-error-child left">
							<img class="el-image__inner" src="./images/error_icon.png" />
						</div>
					</el-col>
					<el-col :span="12">
						<div class="bullshit">
							<div class="bullshit-oops">抱歉!</div>
							<div class="bullshit-headline">您没有任何的菜单权限</div>
							<div class="bullshit-info">当前帐号没有设置菜单,请联系管理员添加菜单。</div>
							<a @click="loginOut" class="bullshit-return-home router-link-active">退出登录</a>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>
<script>
export default {
  methods: {
    loginOut() {
      this.$store.dispatch('user/loginOut')
    }
  }
}
</script>
<style lang="scss">
.error-container {
	position: relative;
	min-height: 100vh;
}

.error-container .error-content {
	position: absolute;
	top: 55%;
	left: 50%;
	width: 40vw;
	height: 400px;
	min-width: 600px;
	transform: translate(-50%, -50%);
}

.error-container .error-content .pic-error {
	position: relative;
	float: left;
	width: 100%;
	overflow: hidden;
}

.error-container .error-content .pic-error-parent {
	width: 100%;
}

.error-container .error-content .pic-error-child {
	position: absolute;
}

.error-container .error-content .pic-error-child.left {
	top: 17px;
	left: 220px;
	width: 80px;
	opacity: 0;
	-webkit-animation-name: cloudLeft-data-v-6dcfd428;
	animation-name: cloudLeft-data-v-6dcfd428;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

@-webkit-keyframes cloudLeft-data-v-6dcfd428 {
	0% {
		top: 17px;
		left: 220px;
		opacity: 0;
	}

	20% {
		top: 33px;
		left: 188px;
		opacity: 1;
	}

	80% {
		top: 81px;
		left: 92px;
		opacity: 1;
	}

	to {
		top: 97px;
		left: 60px;
		opacity: 0;
	}
}

@keyframes cloudLeft-data-v-6dcfd428 {
	0% {
		top: 17px;
		left: 220px;
		opacity: 0;
	}

	20% {
		top: 33px;
		left: 188px;
		opacity: 1;
	}

	80% {
		top: 81px;
		left: 92px;
		opacity: 1;
	}

	to {
		top: 97px;
		left: 60px;
		opacity: 0;
	}
}

.error-container .error-content .bullshit {
	position: relative;
	float: left;
	width: 300px;
	padding: 30px 0;
	overflow: hidden;
}

.error-container .error-content .bullshit-oops {
	margin-bottom: 20px;
	font-size: 32px;
	line-height: 40px;
	color: $color-theme;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.error-container .error-content .bullshit-headline,
.error-container .error-content .bullshit-oops {
	font-weight: 700;
	opacity: 0;
	-webkit-animation-name: slideUp-data-v-6dcfd428;
	animation-name: slideUp-data-v-6dcfd428;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
}

.error-container .error-content .bullshit-headline {
	margin-bottom: 10px;
	font-size: 20px;
	line-height: 24px;
	color: $color-text-theme;
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.error-container .error-content .bullshit-info {
	margin-bottom: 30px;
	font-size: 13px;
	line-height: 21px;
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.error-container .error-content .bullshit-info,
.error-container .error-content .bullshit-return-home {
	opacity: 0;
	-webkit-animation-name: slideUp-data-v-6dcfd428;
	animation-name: slideUp-data-v-6dcfd428;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
}

.error-container .error-content .bullshit-return-home {
	display: block;
	float: left;
	width: 110px;
	height: 36px;
	font-size: 14px;
	line-height: 36px;
	color: #fff;
	text-align: center;
	cursor: pointer;
	background: $color-theme;
	border-radius: 100px;
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

@-webkit-keyframes slideUp-data-v-6dcfd428 {
	0% {
		opacity: 0;
		transform: translateY(60px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideUp-data-v-6dcfd428 {
	0% {
		opacity: 0;
		transform: translateY(60px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}
</style>
